<template>
  <v-card id="personal-card" v-loading="is_loading">
    <v-col class="paperCard"
           v-for="(paper, index) in items"
           :key="'cl_'+index">
      <paper-card :paper="paper" :key="'pc_'+index">
        <template v-slot:action>
          <v-btn outlined color="primary" x-small @click="unstar(paper)">取消收藏</v-btn>
        </template>
      </paper-card>
    </v-col>
  </v-card>
</template>

<script>
import PaperCard from "@/components/PaperCard";

export default {
  components: {
    PaperCard
  },
  data() {
    return {
      items: [],
      is_loading: false
    }
  },
  mounted() {
    this.is_loading = true
    this.$api.personal.getActivities()
      .then(data => this.items = data)
      .catch(error => this.$notify({
        message: error.api_detail || error,
        title: "API error"
      }))
      .finally(() => this.is_loading = false)
  },
  methods: {
    unstar(paper) {
      this.is_loading = true
      this.$api.personal.unstar(paper.collection_id)
        .then(() => this.$router.go())
        .catch(error => this.$notify({
          message: error.api_detail || error,
          title: "API error"
        }))
        .finally(() => this.is_loading = false)
    }
  }
}
</script>

<style lang="sass" scoped>
.paperCard
    width: 100%

</style>

